<main id="distribution" class="mlr-24">
  <div class="title">财务配置</div>

  <div class="dy-flex search">
    <div>项目：</div>
    <div style="width: 150px;">
      <div class="select-ul house-sharing-text">
        <span class="select-name info" ref="projectName">请选择</span>
        <ul>
          <li v-for="item in projectList" @click="getprojectId(item.projectId)">{{item.projectName}}</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="br-4 flow-list-container line-height-40 global_table" style="border:1px solid #E5E5E5;">
    <div class="dy-flex border-b text-center global_table_title">
      <div style="width:50px;">序</div>
      <div style="width:225px;" class="textLeft">项目名称</div>
      <div style="width:585px" class="dy-flex-container textLeft">流水分配顺序
        <span class="iconHover">
          <li class="icon-Gm-explain"></li>
          <li class="hoverText">
            <div></div>
            <ul class="instro">
              <li>根据以下费项顺序自动分配。</li>
            </ul>
          </li>
        </span>
      </div>
      <div style="width:100px" class="border-l">操作</div>
    </div>
    <div>
      <div class="proExpenditure">
        <div>
          <ul class="dy-flex flow-list-item text-center global_table_item" v-for="(item,index) in proExpenditure"
            style="margin:0">
            <li style="width:50px">{{index+1}}</li>
            <li style="width:225px" class="textLeft textOH">{{item.projectName}}</li>
            <li style="width:585px" class="textLeft textOH">{{item.expenditureNamesStr || '--'}}</li>
            <li style="width:100px;color:#337AB7;cursor: pointer;" class="border-l">
              <span @click="configBut(item.projectId,item.projectName)">配置</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </section>
  <!-- 费项优先级配置 -->
  <div class="pop add-account-pop box-o-shadow" style="width:800px;" v-show="isEdit">
    <div class="head-pop font-16">
      <span>费项优先级配置</span>
      <button class="fw-close absolute" @click="isEdit = false">×</button>
    </div>
    <form id="add-user-form">
      <div class="content-pop">
        <div class="content-pop-title color-999">项目名称：<span class="color-666">{{projectName}}</span></div>
        <div class="content-pop-body">
          <div style="margin-bottom:14px"><span class="color-666">费项优先级</span><span
              class="color-999">（直接拖拽至相应位置，即可排序）</span></div>
          <div class="ctx-wrap costList" id="sortableTable">
            <ul v-for="(item,index) in sortTableTitle">
              <li class="dy-fx-1 name">{{item.expenditureName}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="text-center ptb-10">
        <button type="button" class="btn n-btn-primary" style="margin-right:50px" @click="sureChange">确认</button>
        <button type="button" class="btn n-btn-outline" @click="isEdit = false">取消</button>
      </div>
    </form>
  </div>
  <!-- 遮罩层 -->
  <div class="backdrop" style="" v-if="isEdit"></div>
</main>


<style media="screen">
  .costList {
    display: flex;
    flex-wrap: wrap;
  }

  .costList ul {
    margin: 0 12px 20px 0;
  }

  .proExpenditure {
    max-height: 409px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden
  }

  .proExpenditure>div {
    width: 1000px;
  }

  .costList li {
    padding: 5px 15px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #565E99;
    color: #fff;
    cursor: pointer;
    min-width: 110px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .costList li:hover {
    background: #3B458C
  }

  .content-pop {
    padding: 0 22px 42px 22px;
  }

  .content-pop-title {
    line-height: 60px;
    border-bottom: 1px solid #F2F2F2
  }

  .content-pop-body {
    padding-top: 27px;
  }

  .title {
    line-height: 56px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 16px;
    color: #666;
  }

  .search {
    align-items: center;
    margin: 20px 0 13px 0;
  }

  .iconHover {
    position: relative;
    margin-left: 10px;
  }

  .dy-flex-container {
    display: flex;
    align-items: center;
  }

  .textLeft {
    text-align: left;
  }

  .textOH {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hoverText {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -185px;
    top: 6px;
    width: 378px;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    color: #999;
  }

  .hoverText div {
    position: absolute;
    display: inline-block;
    top: 11px;
    left: 185px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(314deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .hoverText ul {
    padding: 0px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }

  .iconHover:hover .hoverText {
    display: flex;
  }
</style>

<script src="modules/system_config/scripts/distribution.js" charset="utf-8"></script>
